<template>
	<view class="f24r col313131">
		<view class="backColWhite lh88r f28r teAliCenter borB1SE6e6e6">
			<view @click="cliTopList(index)" v-for="(item, index) in topList" :key="index"
				:class="['wPer33S333333', 'disInBlo', 'poRel',
					nowCurrent == index ? 'foWeiBold col64aeb4' : ''
				]"
			>
				{{item}}
				<text class="w50r h4r backCol64aeb4 poAbs bom0 left50P trTrXn50P"
					v-show="nowCurrent == index"
				></text>
			</view>
		</view>
		<swiper @change="swiperChaFun" :current="nowCurrent" class="minH100vC90r">
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100" @scrolltolower="orderScroll"
					:refresher-enabled="true" :refresher-triggered="data0Tri"
					@refresherrefresh="orderRefresh"
				>
					<view class="borB1SE6e6e6 h80r aliItCenter backColWhite disFlex pl24r pr24r">
						<view class="col585858 w80r">
							开始：
						</view>
						<view class="flex1 col292929">
							<picker mode="date" :value="data0Date1" :start="startDate" :end="data0Date2"
								@change="data0bindDateChange1"
							>
								<view class="wPer95 h60r lh60r borRad30r bor1SCcc teAliCenter">
									{{data0Date1}}
								</view>
							</picker>
						</view>
						<view class="col585858 w80r">
							结束：
						</view>
						<view class="flex1 col292929">
							<picker mode="date" :value="data0Date2" :start="data0Date1" :end="endDate"
								@change="data0bindDateChange2"
							>
								<view class="wPer95 h60r lh60r borRad30r bor1SCcc teAliCenter">
									{{data0Date2}}
								</view>
							</picker>
						</view>
						<view class="w140r teAliCenter poRel">
							<view class="w120r bor1S5a81f6 floRight lh50r borRad25r col5a81f6"
								@click="cliScreen(0)"
							>
								筛选
							</view>
						</view>
					</view>
					<rechargeOrder :orderList="data0List" :orderMore="data0More"
					></rechargeOrder>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<view class="backColFf3627 lh60r pl20r colFff">
					支付成功的充值金额合计：¥{{orderAmountTo ? orderAmountTo : '0.00'}}
				</view>
				<scroll-view scroll-y="true" class="minH100vC60r" @scrolltolower="orderScroll"
					:refresher-enabled="true" :refresher-triggered="data1Tri"
					@refresherrefresh="orderRefresh"
				>
					<view class="borB1SE6e6e6 h80r aliItCenter backColWhite disFlex pl24r pr24r">
						<view class="col585858 w80r">
							开始：
						</view>
						<view class="flex1 col292929">
							<picker mode="date" :value="data1Date1" :start="startDate" :end="data1Date2"
								@change="data1bindDateChange1"
							>
								<view class="wPer95 h60r lh60r borRad30r bor1SCcc teAliCenter">
									{{data1Date1}}
								</view>
							</picker>
						</view>
						<view class="col585858 w80r">
							结束：
						</view>
						<view class="flex1 col292929">
							<picker mode="date" :value="data1Date2" :start="data1Date1" :end="endDate"
								@change="data1bindDateChange2"
							>
								<view class="wPer95 h60r lh60r borRad30r bor1SCcc teAliCenter">
									{{data1Date2}}
								</view>
							</picker>
						</view>
						<view class="w140r teAliCenter poRel">
							<view class="w120r bor1S5a81f6 floRight lh50r borRad25r col5a81f6"
								@click="cliScreen(1)"
							>
								筛选
							</view>
						</view>
					</view>
					<rechargeOrder :orderList="data1List" :orderMore="data1More"
					></rechargeOrder>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100" @scrolltolower="orderScroll"
					:refresher-enabled="true" :refresher-triggered="data2Tri"
					@refresherrefresh="orderRefresh"
				>
					<view class="borB1SE6e6e6 h80r aliItCenter backColWhite disFlex pl24r pr24r">
						<view class="col585858 w80r">
							开始：
						</view>
						<view class="flex1 col292929">
							<picker mode="date" :value="data2Date1" :start="startDate" :end="data2Date2"
								@change="data2bindDateChange1"
							>
								<view class="wPer95 h60r lh60r borRad30r bor1SCcc teAliCenter">
									{{data2Date1}}
								</view>
							</picker>
						</view>
						<view class="col585858 w80r">
							结束：
						</view>
						<view class="flex1 col292929">
							<picker mode="date" :value="data2Date2" :start="data2Date1" :end="endDate"
								@change="data2bindDateChange2"
							>
								<view class="wPer95 h60r lh60r borRad30r bor1SCcc teAliCenter">
									{{data2Date2}}
								</view>
							</picker>
						</view>
						<view class="w140r teAliCenter poRel">
							<view class="w120r bor1S5a81f6 floRight lh50r borRad25r col5a81f6"
								@click="cliScreen(2)"
							>
								筛选
							</view>
						</view>
					</view>
					<rechargeOrder :orderList="data2List" :orderMore="data2More"
					></rechargeOrder>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import { inquiryToLogin, dateLimit } from '@/utils/utils.js'
import { teaGetMemberRecharge } from '@/utils/api.js'
import rechargeOrder from '@/components/rechargeOrder.vue'
export default {
	components: { rechargeOrder },
	data() {
		return {
			token: '',
			topList: ['生成订单', '支付成功', '支付超时'],
			nowCurrent: 0,
			orderAmountTo: '',
			data0Tri: false, data0Date1: '', data0Date2: '', data0List: [],
				data0More: false, data0Page: 0, data0EndTime: '',
			data1Tri: false, data1Date1: '', data1Date2: '', data1List: [],
				data1More: false, data1Page: 0, data1EndTime: '',
			data2Tri: false, data2Date1: '', data2Date2: '', data2List: [],
				data2More: false, data2Page: 0, data2EndTime: '',
		}
	},
	computed: {
		startDate() {
			return dateLimit('oldYear1');
		},
		endDate() {
			return dateLimit('start');
		}
	},
	onLoad() {
		this.data0Date1 = dateLimit();
		this.data0Date2 = dateLimit('', new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
		this.data0EndTime = dateLimit('', new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
		this.data1Date1 = dateLimit();
		this.data1Date2 = dateLimit('', new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
		this.data1EndTime = dateLimit('', new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
		this.data2Date1 = dateLimit();
		this.data2Date2 = dateLimit('', new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
		this.data2EndTime = dateLimit('', new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
		inquiryToLogin().then(res => {
			this.token = res;
			this.getDataList1(0, 1, this.data0Date1, this.data0EndTime);
			this.getDataList1(0, 2, this.data1Date1, this.data1EndTime);
			this.getDataList1(0, 3, this.data2Date1, this.data2EndTime);
		});
	},
	methods: {
		getDataList1(page, type, start_date, end_date, callBack) {
			uni.showLoading({ title: '加载中...' })
			teaGetMemberRecharge({
				token: this.token, 
				number: 10,
				page, type, start_date, end_date
			}).then(res => {
				console.log(11, res)
				if(type == 1) {
					if(page > 0) {
						this.data0List = this.data0List.concat(res.data.data);
					}else {
						this.data0List = res.data.data;
					}
					if(res.data.number < 10) this.data0More = true;
				}else if(type == 2) {
					if(page > 0) {
						this.data1List = this.data1List.concat(res.data.data);
					}else {
						this.data1List = res.data.data;
					}
					this.orderAmountTo = res.data.amount;
					if(res.data.number < 10) this.data1More = true;
				}else if(type == 3) {
					if(page > 0) {
						this.data2List = this.data2List.concat(res.data.data);
					}else {
						this.data2List = res.data.data;
					}
					if(res.data.number < 10) this.data2More = true;
				}
				uni.hideLoading();
				if(callBack) callBack();
			})
		},
		cliTopList(type) {
			if(type != this.nowCurrent) {
				this.nowCurrent = type;
			}
		},
		swiperChaFun(eee) {
			if (eee.detail.source == 'touch') {
				this.nowCurrent = eee.detail.current;
			}
		},
		orderScroll() {
			if(this.nowCurrent == 0) {
				if(!this.data0More) {
					this.data0Page += 1;
					this.getDataList1(this.data0Page, 1, this.data0Date1, this.data0EndTime);
				} 
			}else if(this.nowCurrent == 1) {
				if(!this.data1More) {
					this.data1Page += 1;
					this.getDataList1(this.data1Page, 2, this.data1Date1, this.data1EndTime);
				} 
			}else if(this.nowCurrent == 2) {
				if(!this.data2More) {
					this.data2Page += 1;
					this.getDataList1(this.data2Page, 3, this.data2Date1, this.data2EndTime);
				} 
			}
		},
		orderRefresh() {
			if(this.nowCurrent == 0) {
				if(!this.data0Tri) {
					this.data0Tri = true;
					this.data0More = false;
					this.data0Page = 0;
					this.getDataList1(0, 1, this.data0Date1, this.data0EndTime, () => {
						this.data0Tri = false;
					});
				}
			}else if(this.nowCurrent == 1) {
				if(!this.data1Tri) {
					this.data1Tri = true;
					this.data1More = false;
					this.data1Page = 0;
					this.getDataList1(0, 2, this.data1Date1, this.data1EndTime, () => {
						this.data1Tri = false;
					});
				}
			}else if(this.nowCurrent == 2) {
				if(!this.data2Tri) {
					this.data2Tri = true;
					this.data2More = false;
					this.data2Page = 0;
					this.getDataList1(0, 3, this.data2Date1, this.data2EndTime, () => {
						this.data2Tri = false;
					});
				}
			}
		},
		data0bindDateChange1(eee) {
			this.data0Date1 = eee.detail.value
		},
		data0bindDateChange2(eee) {
			this.data0Date2 = eee.detail.value;
			this.data0EndTime = dateLimit('', new Date(new Date(eee.detail.value).getTime() + 24 * 60 * 60 * 1000));
		},
		data1bindDateChange1(eee) {
			this.data1Date1 = eee.detail.value
		},
		data1bindDateChange2(eee) {
			this.data1Date2 = eee.detail.value;
			this.data1EndTime = dateLimit('', new Date(new Date(eee.detail.value).getTime() + 24 * 60 * 60 * 1000));
		},
		data2bindDateChange1(eee) {
			this.data2Date1 = eee.detail.value
		},
		data2bindDateChange2(eee) {
			this.data2Date2 = eee.detail.value;
			this.data2EndTime = dateLimit('', new Date(new Date(eee.detail.value).getTime() + 24 * 60 * 60 * 1000));
		},
		cliScreen(type) {
			if(type == 0) {
				this.data0More = false;
				this.data0Page = 0;
				this.getDataList1(0, 1, this.data0Date1, this.data0EndTime);
			}else if(type == 1) {
				this.data1More = false;
				this.data1Page = 0;
				this.getDataList1(0, 2, this.data1Date1, this.data1EndTime);
			}else if(type == 2) {
				this.data2More = false;
				this.data2Page = 0;
				this.getDataList1(0, 3, this.data2Date1, this.data2EndTime);
			}
		},
	}
}
</script>
<style>
</style>